<template>
	<view class="listType">
		<view class="title">
			<view class="uni-padding-wrap uni-common-mt">
				<uni-segmented-control :current="current" :values="listType" :style-type="styleType"
					:active-color="activeColor" @clickItem="onClickItem" />
			</view>
		</view>
		<view class="content">
			<view class="" v-if="current == 0">
				<view class="list" v-for="(item,index) in tobeReceivedList" key="index">
					<view class="subTitle">
						<text class="name">{{item.productCatList[0].title}}</text>
						<text class="status">已完成未评价</text>
					</view>
					<view class="info">
						<image class="icon" src="@/static/logo.png" mode="widthFix"></image>
						<view class="substance">
							<view class="introduce">
								{{item.productCatList[0].title}}
							</view>
							<view class="row">
								<view class="price">
									¥{{item.productAmountTotal}}
								</view>
								<view class="number">
									共1件
								</view>

							</view>
							<view class="checkInfo" @click="goPublic(item)">
								<text>去评价</text>

							</view>
						</view>
					</view>
				</view>

			</view>
			<view class="" v-if="current == 1">
				<view class="hadList" v-for="(item,index) in judgementList" key="index">
					<view class="userInfo">
						<image src="@/static/user/user.jpg" mode="widthFix"></image>
						<view class="infoRight">
							<view class="phone">
								<text>{{proxy.sjuLogin.getValue("miaoMobile")}}</text>
								<uni-rate :readonly="true" :size="16" :value="item.commentaryScore"
									active-color="red" />
							</view>
							<view class="time">
								{{item.createTime.split(' ')[0]}}
							</view>

						</view>
					</view>
					<view class="rate">
						<text v-for="(childItem) in item.pjlist">{{childItem}}</text>

					</view>
					<view class="service">
						{{item.comment}}
						<!-- 阿姨提前来了,卫生搞的很认真很仔细,非常不错哦阿姨提前来了,卫生搞的很认真很仔细,非常不错哦 -->
					</view>
					<!-- <view class="imageBox">
						<image src="@/static/logo.png" mode="widthFix"></image>
						<image src="@/static/logo.png" mode="widthFix"></image>
					</view> -->

				</view>
				<!-- 				<view class="hadList">
					<view class="userInfo">
						<image src="@/static/user/user.jpg" mode="widthFix"></image>
						<view class="infoRight">
							<view class="phone">
								<text>135*****3356</text>
								<uni-rate :readonly="true" :size="16" :value="5" active-color="red" />
							</view>
							<view class="time">
								2023-12-23
							</view>

						</view>
					</view>
					<view class="rate">
						<text>超服务的预期</text>
						<text>工具非常齐全</text>
						<text>服务态度超级赞</text>
						<text>打扫的效率高</text>
						<text>打扫的非常干净</text>
					</view>
					<view class="service">
						阿姨提前来了,卫生搞的很认真很仔细,非常不错哦阿姨提前来了,卫生搞的很认真很仔细,非常不错哦
					</view>
					<view class="imageBox">
						<image src="@/static/logo.png" mode="widthFix"></image>
						<image src="@/static/logo.png" mode="widthFix"></image>
					</view>

				</view> -->
			</view>

		</view>

	</view>
</template>

<script setup>
	import {
		onMounted
	} from "vue";
	const {
		Theme,
		onShow
	} = useTheme()
	const {
		proxy
	} = getCurrentInstance()
	const current = ref(0)
	const listType = ref(['未评价', '已评价'])
	const styleType = ref('text')
	const activeColor = ref('#ED2B30')
	const judgementList = ref([])
	const pjlist = ref()
	const tobeReceivedList = ref()
	onMounted(() => {
		getjudgementList()
		getunjudgementList()
	})
	onLoad((options) => { //获取路由参数
		console.log(options.type)
		if (options.type) {
			current.value = Number(options.type) + 1
		}

	})
	const getunjudgementList = () => {
		proxy.sjuRequest.request("/api/weChatMall/order/getOrders/" + proxy.sjuLogin.getValue("miaoMaGJOpenid"), 'post').then(
			res => {
				// console.log(res)
				tobeReceivedList.value = res.data.tobeReceivedList
				console.log(tobeReceivedList.value)

			})
	}
	const getjudgementList = () => {
		proxy.sjuRequest.request("/api/weChatMall/order/queryOrderProductComment/" + proxy.sjuLogin.getValue("miaoMaGJOpenid"),
			'post').then(res => {
			// console.log(res)
			judgementList.value = res.data
			// console.log(judgementList.value)
			for (let i = 0; i < judgementList.value.length; i++) {
				// let aa = judgementList.value[i].labelComment.split(',')
				console.log(judgementList.value[i].labelComment.split(','))
				judgementList.value[i].pjlist = judgementList.value[i].labelComment.split(',')
				// pjlist.value+=aa
			}
			// console.log(judgementList.value)


		})
	}
	const onClickItem = (e) => {
		console.log(e)
		current.value = e.currentIndex
		if (e.currentIndex == 1) {
			getjudgementList()
		} else {
			getunjudgementList()
		}

	}
	const goPublic = (item) => { //+'&productId='+tobeReceivedList.value.productCatList[0].productId
	console.log(item.value)
		proxy.sjuNav.navigateTo('/my/publishComments?orderId=' + item.orderId+'&productId='+item.productCatList[0].productId)
	}
</script>

<style lang="scss">
	.listType {
		width: 100%;
		height: 100%;
		background-color: #FAFAFA;


		.title {
			width: 100%;
			height: 36px;
			background-color: #fff;
		}

		.content {
			margin-top: 20rpx;
			padding: 0 10rpx;
			box-sizing: border-box;
			margin-bottom: 20rpx;

			.list {
				margin-top: 10px;
				width: 100%;
				// height: 250rpx;
				padding: 20rpx;
				padding-bottom: 40rpx;
				background-color: #fff;
				border-radius: 5px;
				box-sizing: border-box;

				.subTitle {
					height: 30px;
					line-height: 30px;
					display: flex;
					flex-wrap: nowrap;
					justify-content: space-between;
					font-size: 30rpx;

					.name {
						color: #949494;
					}

					.status {
						// font-size: 28rpx;
						color: #D43635;
					}
				}

				.info {
					margin-top: 20rpx;
					display: flex;
					flex-wrap: nowrap;

					// justify-content:space-between;
					image {
						width: 80px;
					}

					.substance {
						// width:60%;
						width: calc(100% - 80px);
						padding-left: 40rpx;

						.introduce {
							width: 100%;
							font-size: 24rpx;
							box-sizing: border-box;
							// overflow: hidden;
							// white-space: nowrap;
							// -webkit-box-orient: vertical;
							// text-overflow: ellipsis;
							// webkit-line-clamp: 2;

							overflow: hidden;
							display: -webkit-box;
							-webkit-box-orient: vertical;
							-webkit-line-clamp: 2;

						}


						.row {
							display: flex;
							flex-wrap: nowrap;
							justify-content: space-between;
							height: 35px;
							line-height: 35px;

							.price {
								font-size: 32rpx;
								color: #D43635;
								font-weight: bold;
							}

							.number {
								font-size: 22rpx;
								color: #CACACA;
							}
						}

						.checkInfo {
							display: flex;
							// align-self:flex-end;
							justify-content: flex-end;

							text {
								padding: 15rpx 25rpx;
								border: 1px solid #979797;
								border-radius: 40rpx;
								color: #979797;
							}
						}

					}
				}
			}

			.hadList {
				margin-top: 10px;
				width: 100%;
				// height: 250rpx;
				padding: 20rpx;
				background-color: #fff;
				border-radius: 5px;
				box-sizing: border-box;


				.userInfo {
					display: flex;
					flex-direction: row;
					align-items: center;

					image {
						width: 100rpx;
					}

					.infoRight {

						.phone {
							display: flex;
							flex-direction: row;

							text {
								color: #1E252B;
							}
						}

						.time {
							color: #99989F;
							font-size: 24rpx;
						}

					}

				}

				.rate {
					display: flex;
					flex-wrap: wrap;
					// justify-content: space-between;
					flex-direction: row;

					::v-deep text {
						font-size: 22rpx;
						flex-basis: calc(33.33% - 10px);
						padding: 5px;
						padding: 5rpx 10rpx;
						border: 1px solid #CCCCCC;
						color: #919093;
						box-sizing: border-box;
						margin: 10rpx 5rpx;
						text-align: center;
					}
				}

				.service {
					line-height: 1.8;
					margin-top: 20rpx;
				}

				.imageBox {

					image {
						width: 30%;
						margin: 1%;
						// margin-right:2%;
					}
				}
			}
		}
	}
</style>